<template>
  <div class="home">
    <logo-com></logo-com>
    <!-- 承载用户信息 -->
    <transition name="user">
      <div class="user-mask" v-if="isShowUserMask">
        <ul>
          <li><span>用户名:</span> {{ user.username }}</li>
          <li><span>手机号: </span> {{ user.userphone }}</li>
          <li><span>邮箱: </span> {{ user.useremail }}</li>
          <li v-for="item in personList"><span>{{ item }} </span> <img src="../assets/向右3.png" alt=""> </li>
        </ul>
        <div class="set"><img src="../assets/设置.png" alt="">设置</div>
        <div class="out" @click="out"><img src="../assets/退出.png" alt="">退出登录</div>
      </div>
    </transition>
    <Search></Search>
    <!-- tab选项卡 -->
    <nav>
      <ul>
        <li v-for="(item, index) in tabList" :class="index == activeIndex ? 'active' : ''" @click="changeFn(index)">{{
          item }}
        </li>

      </ul>
    </nav>
    <!-- 内容 -->
    <div class="listbox">
      <!-- 推荐 -->
      <ul v-if="listIndex == 0" class="list">
        <li v-for="item in pNewsongs">
          <router-link :to="{ path: '/songplay', query: { id: item.song.id, picUrl: item.picUrl,songname:item.name, type: 'tuijian' } }">
            <div class="img"><img :src="item.picUrl" alt=""></div>
            <div class="info">
              <div class="songname">{{ item.name }}</div>
              <div class="author">{{ item.song.artist }}</div>
            </div>
          </router-link>
        </li>
      </ul>

      <!-- 收藏 -->
      <ul class="like" v-if="listIndex == 1">
        <span v-if="!isLogin">您还未登录,请先登录~~</span>
        <ul class="likeList">
          <li v-for="(item, index) in likeArr">
            <router-link :to="{ path: '/songplay', query: { id: item.id, picUrl: item.picUrl, songname:item.name,type: 'mylike' } }">
              <div class="order">{{ index + 1 }}</div>
              <div class="likeInfo">
                <div>{{ item.name }}</div>
                <div>{{ item.ar }}</div>
              </div>
            </router-link>
          </li>
        </ul>
      </ul>

      <!-- 热门 -->
      <ul class="hotTop" v-if="listIndex == 2">
        <li v-for="(item, index) in hotArr">
          <router-link :to="{ path: '/songplay', query: { id: item.id, picUrl: item.picUrl,songname:item.name, type: 'hotTop' } }">
            <div class="order">{{ index + 1 }}</div>
            <div class="hotname">{{ item.name }}</div>
            <div class="hotimg"><img :src="item.iconUrl" alt=""></div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import LogoCom from '@/components/LogoCom.vue'
import Search from '@/components/Search'
import { personalized_newsong } from '@/api'
export default {
  name: 'HomeView',
  components: {
    LogoCom,
    Search
  },
  data() {
    return {
      isLogin: false,
      isShowUserMask: false,
      isTouchStart: false,
      startX: 0,
      moveX: 0,
      x: 0,
      user: {},
      pNewsongs: [],
      activeIndex: 0,
      listIndex: 0,
      tabList: ['每日推荐', '我的收藏', '热门排行'],
      personList: ['我的消息', '猫币兑换', '徽章中心', '会员充值', '个性装扮', '定时关闭', '免费听歌'],
      likeArr: [],
      hotArr: []
    }
  },
  methods: {
    out() {
      this.$router.replace({ path: '/login' })
    },
    changeFn(index) {
      this.activeIndex = index
      this.listIndex = index
    },
    // 获取推荐
    async personalizedNewsongFn() {
      await personalized_newsong().then((content) => {
        // console.log("content:", content);
        // 整合数据
        let { code, result } = content;
        if (code == 200) {
          let arr = result.map((item) => {
            let obj = {};
            obj.name = item.name;
            obj.picUrl = item.picUrl;
            obj.song = {};
            obj.song.id = item.song.id;
            let str = "";
            item.song.artists.forEach(opt => {
              str += opt.name + " / "
            })
            obj.song.artist = str.slice(0, str.length - 2);
            return obj;
          });
          //  赋值推荐新歌
          this.pNewsongs = arr.slice(0, 9);
        }
      });
      // console.log(this.pNewsongs);
      localStorage.setItem('pNewsongs', JSON.stringify(this.pNewsongs))
    },

    // 获取收藏
    async getLikeSongFn() {
      try {
        const response = await this.$axios.get(`https://apic.netstart.cn/music/artist/songs?id=6452`);
        // console.log(response.data.songs);
        response.data.songs.forEach(element => {
          let { name, ar, id } = element
          let obj = {}
          obj.name = name
          obj.id = id
          let nar = []
          ar.forEach(item => {
            nar.push(item.name)
          });
          obj.ar = nar.join()
          this.likeArr.push(obj)
        });

      } catch (error) {
        console.error('Error fetching data:', error);
      }
      // console.log(this.likeArr);

      localStorage.setItem('likeArr', JSON.stringify(this.likeArr))
    },

    // 获取热门
    async getHotSongFn() {
      try {
        const response = await this.$axios.get(`https://apis.netstart.cn/music/search/hot/detail`);
        // console.log(response.data.data);
        response.data.data.forEach(element => {
          let { searchWord, iconUrl } = element
          let obj = {}
          obj.name = searchWord
          obj.iconUrl = iconUrl
          this.hotArr.push(obj)
        });
      } catch (error) {
        console.error('Error fetching data:', error);
      }
      // console.log(this.hotArr);
      localStorage.setItem('hotArr', JSON.stringify(this.hotArr))
    },
  },
  created() {
    //  获取用户信息
    let usersstr = localStorage.getItem("USERS");
    let user_id = localStorage.getItem("USER_ID");
    if (user_id) {
      if (usersstr) {
        this.isLogin = true
        //  把字符串转json对象
        let users = JSON.parse(usersstr);
        // 过滤数据,保留符合条件的数据
        let arr = users.filter((item) => item.user_id == user_id);
        if (arr.length == 1) {
          this.user = arr[0];
        }
      }
    }
    // 获取推荐新歌
    this.personalizedNewsongFn();
    this.getLikeSongFn()
    this.getHotSongFn()
  },
  mounted() {
    // 对文档操作更新精确
    this.$nextTick(() => {
      document.addEventListener("touchstart", (e) => {
        this.isTouchStart = true;
        this.startX = e.touches[0].pageX;
        // console.log(111);
      });
      // 手指移动
      document.addEventListener("touchmove", (e) => {
        // console.log(222);
        if (this.isTouchStart) {
          this.moveX = e.touches[0].pageX;
          this.x = this.moveX - this.startX;
        }
      });
      // 手指松开
      document.addEventListener("touchend", (e) => {
        // console.log(333);
        this.isTouchStart = false;
        // console.log("x", this.x);
        // 判断是否显示用户信息
        if (this.x > 0 && Math.abs(this.x) > 50) {
          // console.log("show");
          // 显示用户信息
          this.isShowUserMask = true;
        }
        if (this.x < 0 && Math.abs(this.x) > 150) {
          // console.log("hide");
          // 显示用户信息
          this.isShowUserMask = false;
        }
        //  重置信息
        this.startX = 0;
        this.moveX = 0;
        this.x = 0;
      });
    });
  },
}
</script>

<style scoped lang="less">
@import "../style/variable.less";

.like {
  span {
    height: 200px;
    line-height: 200px;
    display: inline-block;
    color: #fff;
  }

  .likeList {
    width: 96%;
    margin: 0 auto;
    margin-bottom: 10px;

    li {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-color: #a38ce8;
      border-radius: 5px;
      display: flex;
      padding: 0 10px;
      margin: 0 auto;
      margin-bottom: 10px;

      &:nth-child(1) {
        margin-top: 10px;
      }

      a {
        color: #fff;
        display: flex;
        width: 100%;
        height: 60px;

        .order {
          flex-shrink: 0;
          width: 50px;
          height: 60px;
          line-height: 60px;
          text-align: center;
        }

        .likeInfo {
          height: 100%;
          font-size: 16px;
          padding: 0 10px;
          overflow: hidden;
          /* 防止文本换行 */
          white-space: nowrap;
          /* 当文本溢出时显示省略号 */
          text-overflow: ellipsis;

          div {
            overflow: hidden;
            /* 防止文本换行 */
            white-space: nowrap;
            /* 当文本溢出时显示省略号 */
            text-overflow: ellipsis;
            height: 30px;
            line-height: 30px;

            &:nth-child(1) {
              font-size: 22px;
            }

            &:nth-child(2) {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}

.hotTop {
  width: 96%;
  margin: 0 auto;
  margin-bottom: 10px;

  li {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #a997de;
    border-radius: 5px;
    display: flex;
    padding: 0 10px;
    margin: 0 auto;
    margin-bottom: 10px;

    &:nth-child(1) {
      margin-top: 10px;
    }

    a {
      color: #fff;
      display: flex;
      width: 100%;
      height: 60px;
      position: relative;

      .order {
        flex-shrink: 0;
        width: 50px;
        height: 60px;
        line-height: 60px;
        text-align: center;
      }

      .hotimg {
        width: 30px;
        height: 30px;
        line-height: 60px;
        position: absolute;
        right: 40px;
        text-align: center;

        img {
          height: 100%;
          background-size: cover;
        }
      }
    }
  }

}

.home {
  width: 100%;
  height: 100%;
  background-color: #e3e0eb;
  font-family: "logotext";
}

nav {
  margin-top: 20px;

  ul {
    display: flex;
    width: 95%;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    justify-content: space-between;

    li {
      width: 110px;
      text-align: center;
      height: 100%;
      background-color: @bgColor;
      border: 1px solid @borderColor;
      border-radius: 5px;
      color: #fff;

      &.active {
        color: #795ad4;
        font-weight: bolder;
      }
    }
  }
}

.listbox {
  margin: 20px auto;
  width: 95%;
  background-color: #ccbcfe;
  overflow: hidden;
  border-radius: 5px;

  .list {
    margin-top: 10px;
    border-radius: 5px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    li {
      border: 1px solid #fff;
      flex-shrink: 0;
      margin-bottom: 12px;
      border-radius: 5px;
      overflow: hidden;
      width: 110px;
      height: 150px;

      .img {
        width: 100%;
        height: 110px;

        img {
          width: 100%;
          background-size: cover;
        }
      }

      .info {
        width: 100%;
        height: 40px;
        background-color: #ac99e8;
        padding: 0 10px;
        color: #fcfafa;

        div {
          width: 90%;
          margin: 0 auto;
          overflow: hidden;
          /* 防止文本换行 */
          white-space: nowrap;
          /* 当文本溢出时显示省略号 */
          text-overflow: ellipsis;
        }

        .songname {
          font-size: 12px;
        }

        .author {
          font-size: 10px;
        }
      }
    }
  }
}

.user-mask {
  user-select: none;
  font-family: logotext;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100%;
  width: 80%;
  color: #fff;
  background-color: rgba(163, 134, 184, 0.75);
  padding: 20px;
  font-size: 18px;

  ul {
    margin-top: 60px;

    li {
      position: relative;

      span {
        display: inline-block;
        width: 80px;
        height: 50px;
        text-align: right;
      }

      img {
        position: absolute;
        width: 30px;
        height: 30px;
        right: 30px;
      }
    }
  }

  ;

  .set {
    position: absolute;
    bottom: 20px;
    left: 20px;
  }

  .out {
    position: absolute;
    bottom: 20px;
    right: 30px;
  }
}

.user-enter {
  transform: translateX(-100%);
  opacity: 0;
}

.user-enter-active {
  transition: all 0.3s;
}

.user-enter-to {
  transform: translateX(0px);
  opacity: 1;
}

.user-leave {
  transform: translateX(0px);
  opacity: 1;
}

.user-leave-active {
  transition: all 0.3s;
}

.user-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>
